<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Blog</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="assets/css/blog.style.css"/>
</head>
<body>

<!-- 简介 -->
<header class="header">
    <div class="am-g header-words">
        <h1 class="am-animation-scale-up">Amaze -> Blog</h1>
        <p class="am-animation-fade">Happy to meet you!</p>
    </div>

    <ul class="am-container am-nav">
        <li id="article" class="am-active">Articles</li>
        <li id="photo">Photos</li>
        <li id="about">About</li>
    </ul>
</header>

<div class="blog-content am-g am-g-fixed blog-g-fixed">

    <!-- 文章部分 -->
    <div class="articles am-animation-slide-right">
        <article class="blog-main">
            <h3 class="am-article-title blog-title">
                <a href="#">Google fonts 的字體（display 篇）</a>
            </h3>

            <div class="am-g blog-content">
                <div class="am-u-lg-7">
                    <p><!-- 本demo来自 http://blog.justfont.com/ -->你自信滿滿的跟客戶進行第一次 demo。秀出你精心設計的內容時，你原本期許客戶冷不防地掉下感動的眼淚。</p>

                    <p>因為那實在是太高級了。</p>

                    <p>除了各項基本架構幾乎完美無缺之外，內文是高貴的，有著一些距離感的，典雅的襯線字體。不是 Times New
                        Roman，而是很少有人見過的，你精心挑選過的字體，凸顯你品味的高超。而且它並沒有花上你與業主一毛錢，或許這也非常重要。</p>
                </div>
                <div class="am-u-lg-5">
                    <p><img src="http://f.cl.ly/items/451O3X0g47320D203D1B/不夠活潑.jpg"></p>
                </div>
            </div>
            <div class="am-g">
                <div class="am-u-sm-12">
                    <p>看著自己的作品，你的喜悅之情溢於言表，差點就要說出我要感謝我的父母之類的得獎感言。但在你對面的客戶先是一點表情也沒有，又瞬間轉為陰沉，抿了抿嘴角冷冷的說……</p>

                    <p>「我要一種比較跳的感覺懂嗎？」</p>
                </div>
            </div>
            <p class="am-article-meta blog-meta">by <a href="">open</a> posted on 2014/06/17 under <a href="#">字体</a></p>
        </article>

        <article class="blog-main">
            <h3 class="am-article-title blog-title">
                <a href="#">身邊的字體: Arial (上)</a>
            </h3>


            <div class="am-g blog-content">
                <div class="am-u-lg-7">
                    <p><!--本demo文字来自 http://blog.justfont.com/--> 这次要介绍的是大家似乎都狠熟悉却又狠陌生的字体：Arial。不只是对 Typography
                        特别有兴趣的人、碰过排版的人，就算毫无接触，只要打开过电脑的字型选单，应该都有看过这个字型吧。尤其它还是以 A 开头，总是会出现在选单最前面。</p>

                    <p>Arial 常常跟 Helvetica 搞混，也常被当作是没有 Helvetica 时的替代字体使用。事实上 Arial 确实就是故意做得跟 Helvetica 狠相似，连每个字母的宽度都刻意做得一模一样。</p>
                </div>
                <div class="am-u-lg-5">
                    <p><img src="https://farm3.staticflickr.com/2917/14186214720_5d0b8ca2e3_b.jpg"></p>
                </div>
            </div>
            <div class="am-g">
                <div class="am-u-sm-12">
                    <p>在欧美的排版业界中，使用 Arial 的作品意即是「不使用 Helvetica 的作品」，会被认為是设计师对字体的使用没有概念或是太容易妥协，基本上我大致也是同意。</p>

                    <p>因為 Helvetica 只有 Mac 上才有內建，Windows 用戶除非花錢買，不然是沒有 Helvetica 能用，所以使用 Arial 的設計師往往被看成是不願意對 Typography
                        花錢，專業素養不到家的人。除了在確保網頁相容性等絕對必需的情況外，幾乎可以說是不應該使用的字體。</p>

                    <p>但是，在此之前，我們對 Arial 又有多少認識呢？</p>
                </div>
            </div>
            <p class="am-article-meta blog-meta">by <a href="">ben</a> posted on 2014/06/17 under <a href="#">javascript</a></p>
        </article>

        <hr class="am-article-divider blog-hr">
        <ul class="am-pagination blog-pagination">
            <li class="am-pagination-prev"><a href="">&laquo; 上一页</a></li>
            <li class="am-pagination-next"><a href="">下一页 &raquo;</a></li>
        </ul>
    </div>

    <!-- 照片部分 -->
    <div class="photos">
        <ul class="am-avg-sm-1 am-avg-md-2 am-avg-lg-4 am-margin gallery-list am-animation-slide-right">
            <li>
                <a href="#">
                    <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" alt=""/>
                    <div class="gallery-title">远方 有一个地方 那里种有我们的梦想</div>
                    <div class="gallery-desc">2375-09-26</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-2.jpg" alt=""/>
                    <div class="gallery-title">君可见漫天落霞</div>
                    <div class="gallery-desc">2375-09-26</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-3.jpg" alt=""/>
                    <div class="gallery-title">此刻鲜花满天幸福在身边</div>
                    <div class="gallery-desc">2375-09-26</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-4.jpg" alt=""/>
                    <div class="gallery-title">你当我是浮夸吧</div>
                    <div class="gallery-desc">2375-09-26</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-4.jpg" alt=""/>
                    <div class="gallery-title">远方 有一个地方 那里种有我们的梦想</div>
                    <div class="gallery-desc">2375-09-26</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" alt=""/>
                    <div class="gallery-title">斜阳染幽草 几度飞红</div>
                    <div class="gallery-desc">2375-09-26</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" alt=""/>
                    <div class="gallery-title">远方 有一个地方 那里种有我们的梦想</div>
                    <div class="gallery-desc">2375-09-26</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-3.jpg" alt=""/>
                    <div class="gallery-title">你当我是浮夸吧</div>
                    <div class="gallery-desc">2375-09-26</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-3.jpg" alt=""/>
                    <div class="gallery-title">远方 有一个地方 那里种有我们的梦想</div>
                    <div class="gallery-desc">2375-09-26</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-2.jpg" alt=""/>
                    <div class="gallery-title">君可见漫天落霞</div>
                    <div class="gallery-desc">2375-09-26</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-3.jpg" alt=""/>
                    <div class="gallery-title">你当我是浮夸吧</div>
                    <div class="gallery-desc">2375-09-26</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-2.jpg" alt=""/>
                    <div class="gallery-title">君可见漫天落霞</div>
                    <div class="gallery-desc">2375-09-26</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" alt=""/>
                    <div class="gallery-title">斜阳染幽草 几度飞红</div>
                    <div class="gallery-desc">2375-09-26</div>
                </a>
            </li>
        </ul>
    </div>

    <!-- 介绍与目录等 -->
    <div class="about am-animation-slide-right">
        <div class="am-panel-group">
            <section class="am-panel am-panel-default">
                <div class="am-panel-hd">关于我</div>
                <div class="am-panel-bd am-nbfc">
                    <p>前所未有的中文云端字型服务，让您在 web 平台上自由使用高品质中文字体，跨平台、可搜寻，而且超美。云端字型是我们的事业，推广字型学知识是我们的志业。从字体出发，关心设计与我们的生活，justfont blog
                        正是為此而生。</p>
                    <a class="am-btn am-btn-success am-btn-sm am-fr" href="#">查看更多 →</a>
                </div>
            </section>
            <section class="am-panel am-panel-default">
                <div class="am-panel-hd">文章目录
                    <form class="article-search am-form-inline am-topbar-right" role="search">
                        <div class="am-form-group">
                            <input type="text" class="am-form-field am-input-sm" placeholder="搜索文章">
                        </div>
                        <button type="submit" class="am-btn am-btn-default am-btn-sm">搜索</button>
                    </form>
                </div>
                <ul class="am-list blog-list">
                    <li><a href="#">Google fonts 的字體（sans-serif 篇）</a></li>
                    <li><a href="#">[but]服貿最前線？－再訪桃園機場</a></li>
                    <li><a href="#">到日星鑄字行學字型</a></li>
                    <li><a href="#">glyph font vs. 漢字（上）</a></li>
                    <li><a href="#">浙江民間書刻體上線</a></li>
                    <li><a href="#">[極短篇] Android v.s iOS，誰的字體好讀？</a></li>
                </ul>
            </section>

            <section class="am-panel am-panel-default">
                <div class="am-panel-hd">团队成员</div>
                <div class="am-panel-bd">
                    <ul class="am-avg-sm-2 am-avg-md-4 am-avg-lg-8 blog-team">
                        <li><img class="am-thumbnail"
                                 src="http://img4.duitang.com/uploads/blog/201406/15/20140615230220_F5LiM.thumb.224_0.jpeg" alt=""/>
                        </li>
                        <li><img class="am-thumbnail"
                                 src="http://img4.duitang.com/uploads/blog/201406/15/20140615230220_F5LiM.thumb.224_0.jpeg" alt=""/>
                        </li>
                        <li><img class="am-thumbnail"
                                 src="http://img4.duitang.com/uploads/blog/201406/15/20140615230220_F5LiM.thumb.224_0.jpeg" alt=""/>
                        </li>
                        <li><img class="am-thumbnail"
                                 src="http://img4.duitang.com/uploads/blog/201406/15/20140615230220_F5LiM.thumb.224_0.jpeg" alt=""/>
                        </li>
                        <li><img class="am-thumbnail"
                                 src="http://img4.duitang.com/uploads/blog/201406/15/20140615230159_kjTmC.thumb.224_0.jpeg" alt=""/>
                        </li>
                        <li><img class="am-thumbnail"
                                 src="http://img4.duitang.com/uploads/blog/201406/15/20140615230220_F5LiM.thumb.224_0.jpeg" alt=""/>
                        </li>
                        <li><img class="am-thumbnail"
                                 src="http://img4.duitang.com/uploads/blog/201406/15/20140615230220_F5LiM.thumb.224_0.jpeg" alt=""/>
                        </li>
                        <li><img class="am-thumbnail"
                                 src="http://img4.duitang.com/uploads/blog/201406/15/20140615230159_kjTmC.thumb.224_0.jpeg" alt=""/>
                        </li>
                    </ul>
                </div>
            </section>
        </div>
    </div>

</div>


<footer class="blog-footer">
    <p>blog template<br/>
        <small>© Copyright XXX. Designed by Misic.</small>
    </p>
</footer>

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<!--[if lt IE 9]>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script>
    $(document).ready(function(){
        $("#article").click(function(){
            $(".articles").css("display","block");
            $(".photos").css("display","none");
            $(".about").css("display","none");
            $("#article").addClass("am-active");
            $("#photo").removeClass("am-active");
            $("#about").removeClass("am-active");
        });
        $("#photo").click(function(){
            $(".articles").css("display","none");
            $(".photos").css("display","block");
            $(".about").css("display","none");
            $("#article").removeClass("am-active");
            $("#photo").addClass("am-active");
            $("#about").removeClass("am-active");
        });
        $("#about").click(function(){
            $(".articles").css("display","none");
            $(".photos").css("display","none");
            $(".about").css("display","block");
            $("#article").removeClass("am-active");
            $("#photo").removeClass("am-active");
            $("#about").addClass("am-active");
        });
    });
</script>
</body>
</html>